<?php
require_once 'common.php';

// 获取文章ID
$article_id = $_GET['id'] ?? '';
if (empty($article_id)) {
    header('Location: article_list.php');
    exit;
}

// 调用接口获取文章详情
$params = [
    'material_id' => $article_id,
    'app_id' => 10001
];
$article = api_request(API_ARTICLE_DETAIL , $params );
$article_data = $article['data']['detail'] ?? [];
// print_r($article_data );
if (empty($article_data)) {
    echo '<h1>文章不存在或已被删除</h1>';
    exit;
}

// 获取上一篇下一篇文章（假设接口返回了相关数据）
// 实际项目中可能需要额外调用接口获取
$prev_article = $article_data['prev_article'] ?? [];
$next_article = $article_data['next_article'] ?? [];

// SEO标签配置
$page_title = $article_data['title'] . ' - 健康学堂 - ' . SITE_NAME;
$page_desc = mb_substr(strip_tags($article_data['content']), 0, 150) . '...';
$page_keywords = "{$article_data['title']},{$article_data['category']['name']},健康知识";
$canonical_url = build_url('article_detail', ['id' => $article_id]);
?>
<?php include 'templates/header.php'; ?>
<?php include 'templates/navbar.php'; ?>

<!-- 引入小红书风格样式 -->
<link rel="stylesheet" href="static/css/xiaohongshu.css">

<?php if (!empty($article['data'])): ?>
<!-- 页面标题 -->
<section class="section page-header">
  <div class="container mt30">
    <h1><?php echo $article_data['title']; ?></h1>
    <p class="text-muted">
      <a href="article_list.php">健康学堂</a> / <?php echo $article_data['title']; ?>
    </p>
  </div>
</section>

<div class="xhs-detail container">
  <!-- 作者信息 -->
  <div class="xhs-detail-header">
    <img src="<?php echo $article_data['user']['avatarUrl']; ?>" alt="辰小膳 益生元 膳食纤维 低聚果糖  肠道健康  低聚半乳糖<?php echo $article_data['user']['nickName']; ?>" class="xhs-detail-avatar">
    <div class="xhs-user-info">
      <h3><?php echo $article_data['user']['nickName']; ?></h3>
      <p>发布于 <?php echo date('Y年m月d日', strtotime($article_data['create_time'])); ?></p>
    </div>
  </div>
  
  <!-- 内容区域 -->
  <div class="xhs-detail-content">
    <div class="xhs-detail-images">
      <?php foreach ($article_data['image'] as $img): ?>
        <img src="<?php echo $img['file_path']; ?>" alt="辰小膳 益生元 膳食纤维 低聚果糖  肠道健康  低聚半乳糖<?php echo $article_data['title']; ?>">
      <?php endforeach; ?>
    </div>
    
    <div class="xhs-detail-text">
      <h1 class="xhs-detail-title"><?php echo $article_data['title']; ?></h1>
      <div class="xhs-detail-desc">
        <?php echo nl2br($article_data['content']); ?>
      </div>
		
		<div class="product-features mt-4">
			<img src=".\static\image\buy.png" style="width:100%">
          </div>
		<div class="product-actions mt-5">
            <a href="#contact" class="btn btn-primary btn-lg">扫码了解更多内容……</a>
            <a href="article_list.php" class="btn btn-secondary btn-lg ms-3">返回列表</a>
          </div>
		<div class="tips mt30">
			<div class="tips-title">温馨提示：</div>
			<div>1、本页内容旨在提供健康科普知识，无法替代任何专业医疗建议。</div>
			<div>2、如果您有特定的健康问题，请务必咨询执业医师或注册营养师，祝您身体健康！</div>
			<div>3、若涉及侵权，请联系我方删除。</div>
		</div>
      
      <div class="xhs-detail-meta">
        <div class="xhs-detail-like">
          <i class="far fa-heart"></i>
          <span><?php echo isset($article_data['likes'])?$article_data['likes']:0; ?> 喜欢</span>
        </div>
        <div>
          <i class="far fa-comment"></i>
          <span><?php echo isset($article_data['comments'])?$article_data['comments']:0; ?> 评论</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 相关推荐 -->
  <div class="xhs-related">
    <h3>相关推荐</h3>
    <div class="xhs-masonry">
      <?php 
      // 获取相关文章
      $related = api_request(API_ARTICLE_LIST, [
          'category' => $article_data['category_id'],
          'page' => 1,
          'list_rows' => 4,
          'app_id' => 10001
      ]);
      
      if (!empty($related['data']['list'])) {
          foreach ($related['data']['list']['data'] as $item) {
              if ($item['material_id'] != $article_id) { // 排除当前文章
      ?>
      <div class="xhs-card">
        <a href="article_detail.php?id=<?php echo $item['material_id']; ?>">
          <img src="<?php echo $item['image']; ?>" alt="辰小膳 益生元 膳食纤维 低聚果糖  肠道健康  低聚半乳糖<?php echo $item['title']; ?>" class="xhs-card-img">
          <div class="xhs-card-content">
            <div class="xhs-card-title"><?php echo $item['title']; ?></div>
            <div class="xhs-card-meta">
              <div class="xhs-like">
                <i class="far fa-heart"></i>
                <span><?php echo isset($item['likes'])?$item['likes']:0; ?></span>
              </div>
            </div>
          </div>
        </a>
      </div>
      <?php 
              }
          }
      }
      ?>
    </div>
  </div>
</div>
<?php else: ?>
<div class="xhs-container">
  <div style="text-align: center; padding: 50px 0;">
    <h3>文章不存在或已被删除</h3>
    <p><a href="xhs_list.php" class="btn btn-primary">返回列表</a></p>
  </div>
</div>
<?php endif; ?>

<?php include 'templates/footer.php'; ?>